let calender = document.querySelector(".calender");

const dates = [
    {
        mon: "26",
        lunar: "十八",
    },
    {
        mon: "27",
        lunar: "十九",
    },
    {
        mon: "28",
        lunar: "二十",
    },
    {
        mon: "29",
        lunar: "廿一",
    },
    {
        mon: "30",
        lunar: "廿二",
    },
    {
        mon: "1",
        lunar: "廿三",
    },
    {
        mon: "2",
        lunar: "廿四",
    },
    {
        mon: "3",
        lunar: "廿五",
    },
    {
        mon: "4",
        lunar: "廿六",
    },
    {
        mon: "5",
        lunar: "廿七",
    },
    {
        mon: "6",
        lunar: "廿八",
    },
    {
        mon: "7",
        lunar: "廿九",
    },
    {
        mon: "8",
        lunar: "三十",
    },
    {
        mon: "9",
        lunar: "六月",
    },
    {
        mon: "10",
        lunar: "初二",
    },
    {
        mon: "11",
        lunar: "初三",
    },
    {
        mon: "12",
        lunar: "初四",
    },
    {
        mon: "13",
        lunar: "初五",
    },
    {
        mon: "14",
        lunar: "初六",
    },
    {
        mon: "15",
        lunar: "初七",
    },
    {
        mon: "16",
        lunar: "初八",
    },
    {
        mon: "17",
        lunar: "初九",
    },
    {
        mon: "18",
        lunar: "初十",
    },
    {
        mon: "19",
        lunar: "十一",
    },
    {
        mon: "20",
        lunar: "十二",
    },
    {
        mon: "21",
        lunar: "十三",
    },
    {
        mon: "22",
        lunar: "十四",
    },
    {
        mon: "23",
        lunar: "十五",
    },
    {
        mon: "24",
        lunar: "十六",
    },
    {
        mon: "25",
        lunar: "十七",
    },
    {
        mon: "26",
        lunar: "十八",
    },
    {
        mon: "27",
        lunar: "十九",
    },
    {
        mon: "28",
        lunar: "二十",
    },
    {
        mon: "29",
        lunar: "廿一",
    },
    {
        mon: "30",
        lunar: "廿二",
    },
    {
        mon: "31",
        lunar: "廿三",
    },
];
let calenderInner = "";
dates.forEach((d) => {
    calenderInner += `<div class="square_wraper">
    <div class="square">
    <div class="mon">${d.mon}</div>
    <div class="luner">${d.lunar}</div>
</div>
    </div>`;
});

calender.innerHTML += calenderInner;
let {left:bgl,top:bgt}=calender.getBoundingClientRect();
let bgCircle=document.querySelector('.bg-circle')

// console.log(bgCircle);

calender.addEventListener('mousemove',(e)=>{
    
    bgCircle.style.left=e.clientX -bgl -72 +'px';
    bgCircle.style.top=e.clientY - bgt - 72 +  'px';
    // console.log(e.clientX - bgl + 6*12 +'px');

})
calender.addEventListener('mouseleave',(e)=>{
    // let bgCircle=document.querySelector('.bg-circle')
    bgCircle.style.display='none';
})
calender.addEventListener('mouseenter',(e)=>{
    // let bgCircle=document.querySelector('.bg-circle')
    bgCircle.style.display='block';
    
})

